<template>
  <div class="forum-list">
    <n-card content-style="padding: 0;">
      <n-tabs
        default-value="全部"
        type="line"
        size="large"
        :tabs-padding="20"
        pane-style="padding: 10px 20px; box-sizing: border-box;"
        animated
        :on-update:value="changeTabs"
      >
        <n-tab-pane :name="item.name" v-for="(item) in courseList" display-directive="show">
          <forumList :course-type="item.id" ref="forumListRef"/>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup>
import forumList from '../components/forum-list.vue'
import {requestTypeList} from "@/api/study/studyApi";
import {onMounted} from "vue";
defineOptions({
  name: 'forumList'
})
const courseList = ref([])
const tabIndex = ref(0)
const changeTabs = (name) => {
  tabIndex.value = courseList.value?.findIndex(item => item.name === name)
  console.log(tabIndex.value);
}
const getCourseList = () => {
  requestTypeList().then(res => {
    courseList.value = [{
      "id": null,
      "createBy": null,
      "createTime": null,
      "lastUpdateBy": null,
      "lastUpdateTime": null,
      "removeFlag": 0,
      "name": "全部"
    }, ...res.data]
  })
}
const forumListRef = ref(null)

onMounted(() => {
  getCourseList()
})
const getForumList = () => {
  forumListRef.value?.[tabIndex.value].loadData()
}
defineExpose({
  getForumList
})
</script>

<style lang="less" scoped>
.forum-list {
}
</style>
